<!DOCTYPE html>
<html
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:hcs="http://hcs.com/facelets">
	<ui:composition 
		template="/template.standard.xhtml">
		<ui:param 
			name="toolbarRendered" 
			value="true"/>
		<ui:define 
			name="title">
			#{title}
		</ui:define>
		<ui:define 
			name="body">
			<style
				type="text/css">
				.body-panel {
					background: #E0E0E0; 
					border: 0px !important;
				}
				#bodyPanel_content {
					border: 0px !important;
					padding: 0px;
				}
			</style>
			<p:panel
				id="bodyPanel"
				styleClass="body-panel">
				<div
					id="crudDiv">
					<h:form
						id="crudForm">
						<p:toolbar
							id="crudToolbar" 
							rendered="#{toolbarRendered}">
							<p:toolbarGroup
								id="crudToolbarGroup" 
								align="left">
								<p:commandButton 
									id="saveCommandButton"
									action="#{mb.preSave}"
									process=":crudForm, @this"
									update=":headerForm, :crudForm, :dataTableForm"
									icon="icon_save" 
									value="#{i18n.save}" 
									title="#{i18n.save}"
									oncomplete="setStyle()" />
								<p:commandButton 
									id="deleteCommandButton"
									onclick="deleteConfirmDialog.show()" 
									icon="icon_delete" 
									value="#{i18n.delete}" 
									title="#{i18n.delete}"
									disabled="#{mb.deleteDisabled}" />
								<p:commandButton 
									id="refreshCommandButton"
									immediate="true"
									action="#{mb.refresh}"
									update=":headerForm, :crudForm, :dataTableForm" 
									icon="icon_refresh"
									value="#{i18n.refresh}" 
									title="#{i18n.refresh}"
									oncomplete="setStyle()" />
							</p:toolbarGroup>
						</p:toolbar>
						<p:spacer 
							height="5"/>
						<p:fieldset				
							id="formFieldset"
							legend="#{crudFieldset}">
							<ui:insert 
								name="form"/>
						</p:fieldset>
						<p:sticky 
							target=":crudForm:crudToolbar" />
					</h:form>
				</div>
				<div
					id="dataTableDiv">
					<h:form
						id="dataTableForm"
						prependId="false">
						<ui:insert 
							name="table"/>
						<p:dataTable
							id="dataTable"
							var="entity" 
							value="#{mb.ldm}" 
							paginator="true" 
							rows="#{mb.dataTableRows}" 
							lazy="true"
							dynamic="true"
							selectionMode="multiple" 
							selection="#{mb.selectedArray}" 
							emptyMessage="#{i18n.noRecordsFound}" 
							paginatorPosition="top"
							rendered="#{useLDM}">
							<p:ajax 
								event="rowSelect" 
								update=":crudForm, :dataTableForm"
								oncomplete="setStyle()"/>
							<p:columns 
								value="#{mb.columnList}" 
								var="column" 
								columnIndexVar="index"   
					            sortBy="#{entity[column.property]}" 
								filterBy="#{entity[column.property]}" 
								filterMatchMode="contains">
								<f:facet 
									name="header">
					                #{column.header}
					            </f:facet>  
					           	#{entity[column.property]}
					        </p:columns>
						</p:dataTable>
						<hcs:loading
		        			block="dataTable"
		        			trigger="dataTable"/>
					</h:form>
				</div>
			</p:panel>
			<hcs:loading
       			block=":bodyPanel"
       			trigger=":crudForm:saveCommandButton, :crudForm:deleteCommandButton, :crudForm:refreshCommandButton"/>
			<p:confirmDialog
				widgetVar="deleteConfirmDialog" 
				message="#{i18n.areYouSureToRemove}" 
				header="#{i18n.delete}" 
				severity="alert"
				appendTo="@(body)">
				<p:commandButton
					id="confirmCommandButton" 
					onclick="deleteConfirmDialog.hide()" 
					actionListener="#{mb.preDelete}" 
					update=":headerForm, :crudForm, :dataTableForm"  
					immediate="true" 
					value="#{i18n.yes}"
					oncomplete="setStyle()" />
				<p:commandButton 
					id="declineCommandButton" 
					onclick="deleteConfirmDialog.hide()" 
					value="#{i18n.no}"
					oncomplete="setStyle()" />
				<hcs:loading
        			block=":bodyPanel"
        			trigger="confirmCommandButton, declineCommandButton"/>
			</p:confirmDialog>
			<script
				type="text/javascript">
				function setCrudDivStyle() {
					$('#crudDiv').css("width", "100%");
					$('#crudDiv').css("padding-bottom", "calc(" + $("#dataTableDiv").css("height") + " + 5px)");
				};
				function setDataTableDivStyle() {
					$('#dataTableDiv').css("position", "fixed");
					$('#dataTableDiv').css("width", "100%");
					$('#dataTableDiv').css("height", "calc(" + $("#dataTable").css("height") + " + 1px + " +  $("#footerDiv").css("height") + ")");
					$('#dataTableDiv').css("bottom", "0px");
				};
				function setStyle() {
					setCrudDivStyle();
					setDataTableDivStyle();
				};
				$(document).ready(function() {
					setStyle(); 
				});
			</script>
		</ui:define>
	</ui:composition>
</html>